<template>
  <div id="app">
    <hot-search-list>
      <template v-slot:title>
        <div class="title">本周热搜 TOP5</div>
       
      </template>
      <template v-slot:abb>
        <ul>
      <li v-for="(item, index) in hotKeywords" :key="index">
        {{ item.text }}
        <span>{{ item.score }}</span>
      </li>
    </ul>
      </template>
    </hot-search-list>
    <hot-search-list>
      <template v-slot:title>
        <div class="title">可能感兴趣的人<span>换一批</span></div>
        
      </template>
      <template v-slot:abb>
        <ul>
      <li v-for="(item, index) in hotKeywords1" :key="index">
           {{ item.text }}
        <button>{{ item.score }}</button>
      </li>
    </ul>
      </template>
     
    </hot-search-list>
  </div>
</template>

<script>
import HotSearchList from './components/HotSearchList';

export default {
  name: 'App',
  components: {
    HotSearchList
  },
  data() {
    return {
      hotKeywords: [
        { text: '#区块链', score: 96 },
        { text: '#数据挖掘', score: 91 },
        { text: '#无人机', score: 87 },
        { text: '#生命科学', score: 72 },
        { text: '#传感器', score: 60 }
      ],
      hotKeywords1: [
        { text: '李国盛', score: '+ 关注' },
        { text: '陈颖', score:'+ 关注' },
      ],
      
    };
  }
};
</script>
<style>
.title{
  display: flex;
  justify-content: space-between;
}
</style>
